<template>
  <div style="display: flex">
    <!--上传图片开始-->
    <el-upload
        class="upload-demo"
        drag
        :on-change="handleFileChange"
        :auto-upload="false"
        :limit="1"
        :on-exceed="handleExceed"
    >
      <el-icon class="el-icon--upload"><uploadFilled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          仅支持 jpg/png 文件并且大小不超过 500kb
        </div>
      </template>
    </el-upload>
    <!--上传图片结束-->
    <!--右边环形图开始-->
    <el-col :span="10" style="display: flex;margin-right: -16vw;border-radius: 30px">
      <el-card shadow="hover" style="width: 300px">
        <div class="card-header">
          <p class="card-header-title">患者年龄分布</p>
          <p class="card-header-desc">最近一个月患者年龄分布情况</p>
        </div>
        <v-chart class="chart" :option="dashOpt2" />
      </el-card>
    </el-col>
    <!--右边环形图结束-->
  </div>
</template>

<script setup lang="ts" name="picture">
import { use } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { dashOpt2, fetchPieData } from '../chart/options'; // 新加入的部分
import { UploadFilled } from "@element-plus/icons-vue";

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  LineChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  MapChart,
]);

// 新加入的部分
import {onMounted, ref} from 'vue';
import axios from "axios";

onMounted(() => {
  fetchPieData();
});

const fileList = ref<File[]>([]);

const handleFileChange = async (file: any) => {
  fileList.value = [file.raw]; // 提取出实际的 File 对象
  await uploadFile();
};

const uploadFile = async () => {
  if (fileList.value.length === 0) {
    console.error('请选择文件');
    return;
  }
  console.log(fileList.value[0])
  const formData = new FormData();
  formData.append('file', fileList.value[0]);
  formData.append('doctorId', '1'); // 假设 doctorId 为 1
  formData.append('patientName', 'John Doe'); // 假设 patientName 为 John Doe
  formData.append('inquireDate', '2023-10-01'); // 假设 inquireDate 为 2023-10-01
  formData.append('result', '查询结果'); // 假设 result 为 查询结果

  try {
    const response = await axios.post('http://localhost:8080/api/records', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    console.log('文件上传成功', response.data);
  } catch (error) {
    console.error('文件上传失败', error);
  }
};
</script>

<style scoped>

.chart {
  width: 100%;
  height: 400px;
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}

.upload-demo{
  width: 60vw;
  height: 500px;
  margin: 20px auto 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
:deep .el-upload-dragger{
  height: 400px;
  border-radius: 20px;
}
.el-upload-dragger .el-icon--upload{
  margin-top: 20px;
  font-size: 200px;
}

.el-upload-dragger .el-upload__text{
  margin-top: 20px;
}
.el-upload__tip{
  text-align: center;
}
</style>
